<template>
  <v-layout title="添加/修改">

    <el-row type="flex" justify="center">
      <el-col :lg="14" :md="14" :sm="20" :xs="24">
        <v-form
          :form-title="formTitle"
          :form-data="formData"
        >
          <template slot="uploadImg">
            <el-form-item label="头像">
              <el-upload
                :show-file-list="false"
                :auto-upload="false"
                :on-change="myUpload"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                class="avatar-uploader"
                action="action">
                <img v-if="formData.avatar_url" :src="formData.avatar_url" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </el-form-item>
          </template>


          <!--公众号搜索-->
          <template slot="search">
            <div class="search">
              <el-input v-model="keyword" placeholder="输入公众号搜索" clearable></el-input>
              <el-checkbox class="mr10" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
              </el-checkbox>
              <el-button type="warning" @click="showDialog">
                设置通知的公众号
              </el-button>
              <!--<el-select v-model="value" placeholder="请选择">-->
              <!--<el-option-->
                <!--v-for="item in options"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
            </div>
          </template>
        </v-form>
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="reset">撤销修改</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible" title="设置通知的公众号">
      <noticeMpids
        :tencentList="tencentList"
        :formData="formData"
        :visible.sync="dialogVisible"
      >

      </noticeMpids>
    </el-dialog>
  </v-layout>
</template>

<script>
  import handleCheck from '@/mixins/handleCheck'
  import noticeMpids from './notice_mpids'

  export default {
    mixins: [handleCheck],
    components: {
      noticeMpids
    },
    data() {
      return {
        formData: {},
        tencentList: [],
        roleList: [
          {
            label: '超级管理员',
            value: 0
          },
          {
            label: '业务员',
            value: 1
          },
          {
            label: '财务主管',
            value: 7
          },
          {
            label: '财务',
            value: 9
          },
          {
            label: '设计主管',
            value: 10
          },
          // {
          //   label: '编辑',
          //   value: 11
          // },
          {
            label: '数据组',
            value: 14
          },
          // {
          //   label: '商务(可查看他人价格)',
          //   value: 15
          // },
          {
            label: '管理员',
            value: 16
          },
          {
            label: '测试',
            value: 18
          },
          {
            label: '郭伟兴',
            value: 19
          },
          {
            label: '抖音达人',
            value: 20
          },
          {
            label: '抖音负责人',
            value: 21
          },
          {
            label: '销售人员',
            value: 22
          },
          {
            label: '销售主管',
            value: 23
          },
          {
            label: '事业部总经理',
            value: 24
          },
          {
            label: '商务AE',
            value: 25
          },
          {
            label: '微信主编级',
            value: 26
          },
          {
            label: '抖音编导/组长',
            value: 27
          }
        ],

        keyword: '',
        dialogVisible: false,
        options:[
          {
            label:'全部',
            value:0,
          },
          {
            label:'全部',
            value:0,
          },
          {
            label:'全部',
            value:0,
          },
          {
            label:'全部',
            value:0,
          },
        ]
      }
    },
    computed: {
      _tencentList() {
        if (!this.keyword) {
          return this.tencentList
        }
        return this.tencentList.filter(item => {
          return item.label && item.label.indexOf(this.keyword) > -1
        })
      },
      title() {
        // console.log(this.$route.meta.title);
        return this.$route.meta.title
      },
      formTitle() {
        return ([
          {
            cn: 'id',
            en: 'fansid',
            disabled: true
          },
          {
            cn: '姓名',
            en: 'name'
          },
          {
            cn: 'openid',
            en: 'openid'
          },
          {
            cn: '昵称',
            en: 'nickname'
          },
          {
            cn: '头像',
            en: 'avatar_url',
            type: 'uploadImg'
          },
          {
            cn: '角色',
            en: 'role_id',
            type: 'select',
            list: this.roleList
          },
          {
            cn: '所属公司',
            en: 'company_id',
            type: 'select',
            list: [
              {
                label: '请选择公司主体',
                value: 0
              },
              {
                label: '系统默认公司',
                value: 1
              },
              {
                label: '霍尔果斯微赞网络科技有限公司',
                value: 2
              }
            ]
          },
          {
            cn: '公众号',
            en: 'mp_ids',
            type: 'checkbox',
            slot: 'search',
            list: this._tencentList,
            handleChange: this.handleListCheckChange
          },
          {
            cn: '省份',
            en: 'province'
          },
          {
            cn: '城市',
            en: 'city'
          },
          {
            cn: '联系电话',
            en: 'tel'
          },
          {
            cn: '电子邮箱',
            en: 'email'
          },
          {
            cn: '绑定用户',
            en: 'bind_user',
            type: 'img',
            tips: '微信扫码绑定,如未关注该公众号,先扫码关注后再次扫码'
          },
          {
            cn: '绑定状态',
            en: 'bind_status',
            disabled: true
          },

          {
            cn: '创建时间',
            en: 'created_at',
            disabled: true
          },
          {
            cn: '更新时间',
            en: 'updated_at',
            disabled: true
          }

        ])
      }
    },
    watch: {
      'formData.role_id'(val) {

      }
    },
    activated() {
      this.formData = JSON.parse(this.$route.query.details)
      this.getTencentList()
      this.showqrcodeUrl()
      this.$emit('childTitle', this.title)

    },
    methods: {
      // 获取公众号列表
      getTencentList() {
        this.$get('action/WechatNumber/tree')
          .then(res => {
            const list = []
            if (res.data.WechatTree) {
              res.data.WechatTree.forEach(item => {
                list.push({
                  label: item.name,
                  value: item.id
                })
              })
            }
            this.tencentList = list
            // 接收传参
            this.formData.mp_ids = this.str2Arr(this.formData.mp_ids)
            this.formData.notice_mp_ids = this.str2Arr(this.formData.notice_mp_ids)
          })
          .catch(_ => console.log(1))
      },
      // 获取公众号二维码
      showqrcodeUrl() {
        this.$get('action/WxUserCtrl/showqrcodeUrl', { 'fansId': this.formData.fansid })
          .then(res => {
              let bind_user =res.data
            if (bind_user) {
            // 接收传参
            this.$set(this.formData,'bind_user',bind_user)
            }
          })
          .catch(_ => console.log(1))

      },
// 撤销
      reset() {
        this.formData = JSON.parse(this.$route.query.details)
        this.formData.mp_ids = this.formData.mp_ids.split(',').map(item => {
          return Number(item)
        })
      },
      str2Arr(str) {
        return (!!str
            ? str.split(',').map(item => {
              return Number(item)
            })
            : []
        )
      },
      submit() {
        const data = this.$deepClone(this.formData)
        data.mp_ids = data.mp_ids.join(',')
        data.notice_mp_ids = data.notice_mp_ids.join(',')
        this.$post('action/WxUserCtrl/save', data)
          .then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$router.go(-1)
          })
      },
      showDialog(){
        this.dialogVisible = true
      },
      back() {
        this.$router.go(-1)
      },
      myUpload(e) {
        this.imageUrl = e.url
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isLt2M
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .search {
    margin-bottom: 10px;
  }
</style>
